<script setup>
import GaodeMap from './components/gaode-map.vue';
import MapMarker from './components/map-marker.vue';
import { ref } from 'vue';

const position = ref([116.397342, 39.90712]);

setInterval(() => {
  position.value = [
    116.397342 + Math.random() * 0.02,
    39.90712 + Math.random() * 0.01,
  ];
}, 1000);

</script>

<template>
  <!-- web component: data >>> dom -->
  <gaode-map id="map">
    <map-marker :position="position" />
  </gaode-map>
</template>

<style>
#map {
  height: 100vh;
  width: 100vw;
}
body {
  margin: 0;
}
</style>
